<template>
  <div class="proofread-main" v-loading="loading">
    <annotation
      type="proofread"
      :isConfirmed="isConfirmed"
      :annotationSourceData="annotationSourceData"
      ref="annotation"
      @save="handleSave"
      @confirm="handleConfirm"
    ></annotation>
  </div>
</template>
<script>
import annotation from "../components/picAnnotation/index.vue";

export default {
  name: "Proofread",
  components: {
    annotation,
  },
  data: () => {
    return {
      annotationSourceData: {
        relationList: [],
        ontologyMenu: [],
        ontologyList: [],
        attributeList: [],
        content: "",
        record: {},
      },
      loading: false,
      isConfirmed: false,
    };
  },
  computed: {},

  created() {
    this.getExtractRecordData();
  },
  mounted() {},
  methods: {
    getExtractRecordData() {
      this.loading = true;

      const { id } = this.$route.query;

      this.$api.knowledgeGeneration
        .extractProofread(id)
        .then((res) => {
          const { code, message, data } = res.data;
          if (code !== 200) {
            this.$message.warning(message);
            return;
          }
          this.annotationSourceData.relationList = data.relationList;
          this.annotationSourceData.ontologyMenu = data.ontologyMenu;

          const flattenChildren = (arr) =>
            arr.reduce((pre, next) => {
              const hasChild = (item) => item.children && item.children.length;
              if (hasChild(next)) {
                return pre.concat(flattenChildren(next.children), next);
              } else {
                return pre.concat(next);
              }
            }, []);
          this.annotationSourceData.ontologyList = flattenChildren(
            this.annotationSourceData.ontologyMenu
          );

          console.log(
            "%c [  ]-71",
            "font-size:13px; background:pink; color:#bf2c9f;",
            data.content
          );
          this.annotationSourceData.content = data.content
            .replaceAll("\n", "")
            .replaceAll("&lt;", "<")
            .replaceAll("&gt;", ">");
          this.annotationSourceData.record = data.record;
          this.isConfirmed = data.ifConfirm;

          this.$refs.annotation.init();
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 保存标注数据
    handleSave(data, onFinish) {
      const { id } = this.$route.query;
      const params = {
        recordId: id,
        userId: "1", //当前用户id
        ...data,
      };
      console.log(params);
      this.$api.knowledgeGeneration
        .saveOrUpdateExtraction(params)
        .then((res) => {
          const { code, message } = res.data;
          if (code !== 200) {
            this.$message.warning(message);
            return;
          }
          this.$message.success(res.data.message);
          if (onFinish) {
            onFinish();
          }
        });
    },
    // 确认标注数据
    async handleConfirm(data, onFinish) {
      const { id } = this.$route.query;
      const params = {
        recordId: id,
        userId: "1", //当前用户id
        ...data,
      };
      console.log(params);
      try {
        let res = await this.$api.knowledgeGeneration.saveOrUpdateExtraction(
          params
        );
        if (res.data.code !== 200) {
          this.$message.error(res.data.message);
          return;
        }
        console.log(res);
        res = await this.$api.knowledgeGeneration.extractConfirme({
          extractRecordId: id,
        });
        if (res.data.code !== 200) {
          this.$message.error(res.data.message);
          return;
        }
        this.$message.success(res.data.message);

        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      } catch (error) {
        console.log(error);
        this.$message.error(error);
      } finally {
        if (onFinish) {
          onFinish();
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.proofread-main {
  padding: 20px;
  background: #ffffff;
  border-radius: 4px;
}
</style>
